<template>
	<main>
		<section style="margin-bottom: 20px;text-align: right;">
			<el-button @click="addCompany">
				<icon name="plus"></icon>
			</el-button>
		</section>
		<section>
			<CompanyList v-bind:companyList="companyList" v-on:triggerEdit="editCompany"></CompanyList>
		</section>
		<el-dialog title="添加新公司" :visible.sync="addCompanyDialog">
			<AddCompany v-bind:newCompany="newCompany" v-on:cancel="resetData"></AddCompany>
		</el-dialog>
		<el-dialog title="编辑公司" :visible.sync="editCompanyDialog">
			<EditCompany v-bind:editCompany="editCompanyData" v-on:cancel="resetData"></EditCompany>
		</el-dialog>
	</main>
</template>

<script>
	import CompanyList from './CompanyList.vue'
	import AddCompany from './AddCompany.vue'
	import EditCompany from './EditCompany.vue'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
	export default {
		name: 'client-platform-manager',
		computed:{},
		components:{
			CompanyList,AddCompany,EditCompany
		},
		data() {
			return {
				companyList:[],
				addCompanyDialog:false,
				newCompany:{},
				editCompanyDialog:false,
				editCompanyData:{},
			}
		},
		methods: {
      ...mapActions({
        fetch:'fetch'
      }),
			resetData(){
				this.requestCompanies();
				this.addCompanyDialog = false;
				this.newCompany = {};
				this.editCompanyDialog = false;
				this.editCompanyData = {};
			},
			requestCompanies(){
        this.fetch({
          name:'getCompanyList',
          method:'post'
        }).then(res=>{

          if(res.errCode){
            this.$message({message:res.errMsg,type: 'error'});
          }else{
            this.companyList = res;
          }
        }).catch(error=>{
          this.$message({message:'连不上服务器',type: 'error'});
        })
				// this.$store.dispatch({
				// 	type:'fetch',
				// 	name:'getCompanyList'
				// })
			},
			addCompany(){
				this.newCompany = {companyName: '',address:'',logo:'',contact:'',phone:'',isEnable:true,};
				this.addCompanyDialog = true;
			},
			editCompany(row) {
				this.editCompanyData = {id: row.id,companyName: row.companyName,address: row.address,logo:row.logo,contact:row.contact,phone:row.phone,isEnable:row.isEnable};
				this.editCompanyDialog = true;
			},
			deleteCompany(row) {
				this.$confirm('确定删除数据？', '提醒', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.requestDeleteCompany(row.id);
				}).catch(() => {
					this.$message({type: 'info',message: '操作失败'});
				});
			},
			requestDeleteCompany(id){
				this.$store.dispatch({
					type:'fetch',
					name:'deleteCompany',
					data:{companyId:id},
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.$message({message:'删除成功',type: 'success'});
						resetData()
					}
				}).catch(error=>{
					this.$message({message:'连不上服务器',type: 'error'});
				})
			}
		},
		created(){
			this.requestCompanies();
		}
	}
</script>
